<template>
  <div>
    姓名 {{persion.name}}，年龄 {{persion.age}} {{msg}}
  </div>
  和为{{sum}}
  <br>
  <button @click="ageName">改名</button>
  <button @click="sum++;msg+='!'">加一</button>
</template>

<script>
import { reactive,ref,watch, watchEffect} from "vue";

export default {
  name:"Demo",
  setup(props,context) {
    let sum = ref(0)
    let msg = ref('hello')
    let persion = reactive({
      name : '张三',
      age : 19
    })

    // watchEffect无法具体指定监视某个ref属性（用到那个监视那个）
    watchEffect(()=>{
      let p1 = persion.name
      console.log('watchEffect指定的回调中的数据被改变了');
    })

    function ageName() {
      persion.name = '李四'
    }
    // 暴露数据
    return {
     persion,ageName,sum,msg
    }
    
  },
  
}
</script>

<style>
  button {
    margin: 3px 10px;
  }
</style>